﻿@using DataAccess;
@model AboutUS
@{
    ViewData["Title"] = "联系我们";
}
@section Style {
    <style>
        .petStoryContentDiv a {
            text-decoration: none;
            color: black;
            font-size: 15px;
        }

            .petStoryContentDiv a:hover {
                text-decoration: underline;
                color: RoyalBlue;
            }
    </style>
}
<div style="width:1020px;margin:auto;" class="petStoryContentDiv">
    <div style="margin-top:9px;height:100px;">
        <a href='@ViewData["bannerAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["bannerAdvertID"])"><img src='@ViewData["bannerAdvertImg"]' style="width:1020px; height:100px;" /></a>
    </div>
    <div style="margin-top:25px;font-size:22px;font-weight:bold;">商家信息</div>
    <div style="background-color:black;height:1px; border:none;margin-top:20px;"></div>
    <div style="margin-top:20px;display:flex;">
        <div style="width:570px;line-height:32px;padding-right:10px;">
            <el-row :gutter="0">
                <el-col :span="3"> <div style="text-align:right;font-weight:bold;">名称：</div></el-col>
                <el-col :span="20"><div style="text-align:left;">@Model.merchantname</div></el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col :span="3"> <div style="text-align:right;font-weight:bold;">地址：</div></el-col>
                <el-col :span="20"><div style="text-align:left;">@Model.address</div></el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col :span="3"> <div style="text-align:right;font-weight:bold;">电话：</div></el-col>
                <el-col :span="20"><div style="text-align:left;">@Model.phone</div></el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col :span="3"> <div style="text-align:right;font-weight:bold;">邮箱：</div></el-col>
                <el-col :span="20"><div style="text-align:left;">@Model.email</div></el-col>
            </el-row>
            <el-row :gutter="0">
                <el-col :span="3"> <div style="text-align:right;font-weight:bold;">联系人：</div></el-col>
                <el-col :span="20"><div style="text-align:left;">@Model.contact</div></el-col>
            </el-row>
        </div>
        <div>
            <img src='/file/@ViewData["subDomain"]/imgs/@Model.coverimgsrc' style="width:450px; height:280px;" />
        </div>
    </div>
    <div style="clear:both;"></div>
    <div style="margin-top:40px;font-size:17px;display:flex;text-align:center;justify-content:center;">
        @Model.introduce
    </div>
    @{
        if (!string.IsNullOrEmpty(Model.otherimgsrc) || !string.IsNullOrEmpty(Model.videosrc))
        {
            <div style="margin-top:40px;text-align:left;font-size:20px;font-weight:bold;">商家SHOW</div>
            <div style="background-color:black;height:1px; border:none;margin-top:10px;"></div>
        }
    }
    @{
        if(!string.IsNullOrEmpty(Model.otherimgsrc))
        {
            string[] imgUrls = Model.otherimgsrc.Split('|');
            for(int i=0;i< imgUrls.Length;i++)
            {
                string imgurl = imgUrls[i];
                if(i == 0)
                {
                    <div style="float:left;margin-top:20px;"><img src='/file/@ViewData["subDomain"]/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
                else
                {
                    <div style="float:left;margin-top:20px;margin-left:20px;"><img src='/file/@ViewData["subDomain"]/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
            }
        }
    }
    @{
        if (!string.IsNullOrEmpty(Model.videosrc))
        {
            <div style="clear:both;"></div>
            <div style="margin-top:30px;width:1020px;display:flex;">
                <div style="border:1px solid;border-color:silver;background-color:lightgray;display:flex;margin:auto;">
                    <video width="670" height="400" controls>
                        <source src="/file/@ViewData["subDomain"]/videos/@Model.videosrc" type="video/mp4">
                        <source src="/file/@ViewData["subDomain"]/videos/@Model.videosrc" type="video/ogg">
                        <source src="/file/@ViewData["subDomain"]/videos/@Model.videosrc" type="video/webm">
                        您的浏览器不支持 video 属性。
                    </video>
                </div>
            </div>
        }
    }
    <div style="margin-bottom:30px;clear:both;"></div>
</div>
@section Scripts {
    <script type="text/javascript">
        $("#aboutUS").css("color", "red");

        var app = new Vue({
            el: "#app",
            mounted: async function () {
                let that = this;
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertClickHandle(val) {
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
            },
            data() {
                return {
                }
            }
        });
    </script>
}